import React from 'react'
import {useNavigate} from 'react-router-dom'
import './calendar.css'


import { BadgeProps, CalendarProps,message } from 'antd';
import { Badge, Calendar } from 'antd';
import type { Dayjs } from 'dayjs';


const calendar: React.FC = () => {
  const navigate=useNavigate()
  const getListData = (value: Dayjs) => {
    let listData: { type: string; content: string }[] = []; // Specify the type of listData
    if (value.month() === 8) {
      switch (value.date()) {
        case 1:
          listData = [
            { type: 'warning', content: '九月你好' },
            { type: 'warning', content: '开学季' },
          ];
          break;
        case 3:
          listData = [
            { type: 'warning', content: '中国人民抗日' },
          ];
          break;
        case 5:
          listData = [
            { type: 'warning', content: '国际慈善日' },
          ];
          break;

        case 7:
          listData = [
            { type: 'warning', content: '白露' },

          ];
          break;
        case 8:
          listData = [
            { type: 'warning', content: '国际新闻工作日' },
            { type: 'warning', content: '国际扫盲日' },
          ];
          break;
        case 10:
          listData = [
            { type: 'warning', content: '教师节' },
          ];
          break;
        case 14:
          listData = [
            { type: 'warning', content: '音乐情人节' },
          ];
          break;
        case 15:
          listData = [
            { type: 'warning', content: '世界清洁地球日' },
          ];
          break;
        case 17:
          listData = [
            { type: 'warning', content: '中秋节' },
          ];
          break;
        case 18:
          listData = [
            { type: 'warning', content: '918事变93周年' },
          ];
          break;
        case 20:
          listData = [
            { type: 'warning', content: '全国爱牙日' },
          ];
          break;
        case 21:
          listData = [
            { type: 'warning', content: '世界和平日' },
            { type: 'warning', content: '全国国防教育日' },
          ];
          break;
        case 22:
          listData = [
            { type: 'warning', content: '秋分' },
          ];
          break;
        case 26:
          listData = [
            { type: 'warning', content: '世界避孕日' },
          ];
          break;
        case 27:
          listData = [
            { type: 'warning', content: '世界旅游日' },
          ];
          break;
        case 28:
          listData = [
            { type: 'warning', content: '孔子文化节' },
            { type: 'warning', content: '世界狂犬病日' },
          ];
          break;
        default:
      }
    }

    return listData || [];
  };

  const getMonthData = (value: Dayjs) => {
    if (value.month() === 8) {
      return 1394;
    }
  };


  const monthCellRender = (value: Dayjs) => {
    const num = getMonthData(value);
    return num ? (
      <div className="notes-month">
        <section>{num}</section>
        <span>Backlog number</span>
      </div>
    ) : null;
  };

  const dateCellRender = (value: Dayjs) => {
    const listData = getListData(value);
    return (
      <ul className="events">
        {listData.map((item) => (
          <li key={item.content} onClick={godetails}>
            <Badge status={item.type as BadgeProps['status']} text={item.content} />
          </li>
        ))}
      </ul>
    );
  };

  const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {
    if (info.type === 'date') return dateCellRender(current);
    if (info.type === 'month') return monthCellRender(current);
    return info.originNode;
  };


  // 点击跳转到详情页面
  const godetails = () => {
     message.success('即将跳转页面')
    setTimeout(() => {
       navigate('/home/geter')
    }, 3000);
   
  }



  return (
    <div className='box'>
      <div className='left'>
        <Calendar style={{ width: '100%', height: '100%' }} cellRender={cellRender} />
      </div>
      <div className='right'>
          
                <div className='h2'>
                   <h2>营销模版直通车</h2> 
                </div>
       
        <ul>
    

          <li onClick={godetails}>
            <p className='pday'>
              <span>9月27日</span>
              <span>今天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界旅游日</span>
            </p>

          </li>

          <li onClick={godetails}>
            <p className='pday'>
              <span>9月28日</span>
              <span>剩1天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>孔子文化节</span>
            </p>
            <p className='pboms'>
              <span></span>
              <span>世界狂犬病日</span>
            </p>
          </li>

          <li onClick={godetails}>
            <p className='pday'>
              <span>9月29日</span>
              <span>剩2天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界心脏日</span>
            </p>
          </li>

             <li onClick={godetails}>
            <p className='pday'>
              <span>9月30日</span>
              <span>剩3天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>中国烈士纪念日</span>
            </p>
          </li>

              <li onClick={godetails}>
            <p className='pday'>
              <span>10月1日</span>
              <span>剩4天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>国庆节</span>
            </p>
                <p className='pboms'>
              <span></span>
              <span>十月你好</span>
            </p>
          </li>


               <li onClick={godetails}>
            <p className='pday'>
              <span>10月04日</span>
              <span>剩7天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界动物日</span>
            </p>
          </li>

               <li onClick={godetails}>
            <p className='pday'>
              <span>10月05日</span>
              <span>剩8天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界教师日</span>
            </p>
          </li>


                 <li onClick={godetails}>
            <p className='pday'>
              <span>10月08日</span>
              <span>剩11天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>寒露</span>
            </p>
          </li>

                 <li onClick={godetails}>
            <p className='pday'>
              <span>10月09日</span>
              <span>剩12天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界邮政日</span>
            </p>
          </li>

                 <li onClick={godetails}>
            <p className='pday'>
              <span>10月10日</span>
              <span>剩13天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>辛亥革命纪念日</span>
            </p>
                <p className='pboms'>
              <span></span>
              <span>世界精神卫生日</span>
            </p>
          </li>

             

                 <li onClick={godetails}>
            <p className='pday'>
              <span>10月11日</span>
              <span>剩14天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>重阳日</span>
            </p>
          </li>


             

                 <li onClick={godetails}>
            <p className='pday'>
              <span>10月13日</span>
              <span>剩16天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界保健日</span>
            </p>
          </li>


               <li onClick={godetails}>
            <p className='pday'>
              <span>10月14日</span>
              <span>剩17天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>葡萄酒情人节</span>
            </p>
          </li>


              <li onClick={godetails}>
            <p className='pday'>
              <span>10月15日</span>
              <span>剩18天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>国际盲人节</span>
            </p>
          </li>

                <li onClick={godetails}>
            <p className='pday'>
              <span>10月15日</span>
              <span>剩18天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>世界粮食节</span>
            </p>
          </li>

              <li onClick={godetails}>
            <p className='pday'>
              <span>10月23日</span>
              <span>剩26天</span>
            </p>

            <p className='pbom'>
              <span></span>
              <span>霜降</span>
            </p>
          </li>

        </ul>
      </div>
    </div>
  )
}

export default calendar
